<template>
	<view v-if="loading">
		<loading></loading>
	</view>
	<view class="container" v-else>
		<view class="detail">
			<view class="course" v-for="(item, index) in list" :key="index" @click="open(item)">
				<view class="left">
					<view class="top-title">
						<view  class="name"><image src="/static/images/test.png" mode=""></image><text></text>{{item.examinationName}}</text></view>
						<text>{{parseTime(item.startTime,'{y}-{m}-{d}')}}至{{parseTime(item.endTime,'{y}-{m}-{d}')}}</text>	
					</view>
					<view class="bottom">
						<text v-if="item.subjectCount>0" class="blue">已组卷</text><text v-else class="red"> 未组卷</text>
						<text class="blue">{{item.type == 0?'正式考试':'模拟考试'}}</text>
						<text class="blue">状态:{{item.status == 1?'已发布':'未发布'}}</text>
						<text class="orange">总分:{{item.totalScore}}</text>
						<text class="green">合格分数:{{item.passScore}}</text>
					</view>
				</view>
				<view class="right">
					<text class="dot"></text>
					<text class="dot"></text>
					<text class="dot"></text>
				</view>
			</view>
		</view>
		<view class="load-more">
			<uni-icons v-if="loadShow" type="spinner-cycle" size="30"></uni-icons>
			<text  v-if="botShow">已经到底了</text>
		</view>
		<view >
			<button class="bottom-button" size="mini" @click="addExamination()">新增试卷</button>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popup">
				<text>组卷</text>
				<text @click="update">修改</text>
				<text  class="del" @click="del">删除</text>
				<text class="cancel" @click="close">取消</text>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import {getExaminationPage,delExamination} from '@/api/exam/exam.js'
	import {parseTime } from '@/utils/ruoyi'
	import loading from '@/components/loading/loading'
	export default{
		data(){
			return{
				list:[],
				pageForm:{
					pageNo:1,
					pageSize:10,
				},
				parseTime,
				loadShow:false,
				botShow:false,
				loading:true,
				active:{
					id:null
				}
			}
		},
		created() {
			this.getList()
		},
		onLoad(e) {
			
		},
		onReachBottom(){
			if(!this.botShow){
				this.loadShow = true
				this.pageForm.pageNo ++ ;
				this.getList()
			}
			
		},
		methods:{
			open(e){
				this.active=e
				console.log(e)
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom')
			},
			close() {
				this.$refs.popup.close()
			},
			clickToRecord(e){
				this.$tab.navigateTo(`/pages/work/exam/examinationRecord`)
			},
			getList(){
				getExaminationPage(this.pageForm).then(res=>{
					if(res.data.list.length > 0){
						this.list.push(...res.data.list)
						this.loadShow = false
					}else{
						this.loadShow = false
						this.botShow = true
					}
					this.loading = false
				})
			},
			update(){
				this.close()
				this.$tab.navigateTo('/pages/work/exam/addExamination?id='+this.active.id)
			},
			addExamination(){
				this.close()
				this.$tab.navigateTo('/pages/work/exam/addExamination')
			},
			del(){
				delExamination(this.active.id).then(res=>{
					this.$modal.msgSuccess("删除成功")
					this.tableData = []
					this.getList()
					this.close()
					
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.container{
		width: calc(100vw - 40rpx);
		height: 100vh;
		margin: 0 auto;
		padding-top: 10px;
		.detail {
			width: 100%;
			border-radius: 20rpx;
			padding-top: 20rpx;
			.course{
				display: flex;
				justify-content: space-around;
				border-bottom: 1px solid #EDEDED;
				padding: 10px 0;
				align-items: center;
				text{
					line-height: 30px;
					font-size: 12px;
					font-family: Inter-Regular, Inter;
					font-weight: 400;
				}
				.left{
					padding-left: 10px;
					width: 85%;
					text{
						color: #5E5E5E;
					}
					.top-title{
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 15px;
						image{
							width: 18px;
							height: 18px;
							margin-right: 10px;
						}
						.name{
							font-size: 14px;
							color: #000000;
							display: flex;
							align-items: center;
						}
					}
					.bottom{
						text{
							padding-right:  7px;
						}
						.green{
							color: #50B987;
						}
						.blue{
							color: #508CFF;
						}
						.red{
							color: #F26D6D;
						}
						.orange{
							color: #FF9A50;
						}
					}
				}
				.right{
					display: flex;
					.dot{
						width: 5px;
						height: 5px;
						background: #A3A3A3;
						opacity: 1;
						margin-right: 3px;
						border-radius: 5px;
					}
				}
			}
			
		}
		.load-more{
			display: block;
			padding: 20px;
			margin: 0 auto;
			text-align: center;
		}
		.bottom-button{
			color: #fff;
			width: 100px;
			height: 40px;
			font-size: 14px;
			line-height: 40px;
			background: #508CFF;
			border-radius: 5px 5px 5px 5px;
			position: fixed;
			bottom: 50px;
			left: 36%;
		}
		.popup{
			height: 207px;
			background: #FFFFFF;
			text{
				line-height: 50px;
				display: block;
				text-align: center;
				font-family: Roboto-Regular, Roboto;
				font-weight: 400;
				color: #000000;
				font-size: 16px;
			}
			.cancel{
				color: #F26D6D;
			}
		}
	}
</style>